<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Defer</h1>
        <p>Defer postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.</p>
    </div>
</div>

<div class="content-section implementation">
    <div style="height:1200px">
        Table is not loaded yet, scroll down to initialize it.
    </div>

    <p-toast></p-toast>

    <div pDefer (onLoad)="initData()">
        <ng-template>
            <p-table [value]="cars">
                <ng-template pTemplate="header">
                    <tr>
                        <th>Vin</th>
                        <th>Year</th>
                        <th>Brand</th>
                        <th>Color</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-car>
                    <tr>
                        <td>{{car.vin}}</td>
                        <td>{{car.year}}</td>
                        <td>{{car.brand}}</td>
                        <td>{{car.color}}</td>
                    </tr>
                </ng-template>
            </p-table>
        </ng-template>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;DeferModule&#125; from 'primeng/defer';
</app-code>

            <h5>Getting Started</h5>
            <p>Defer is applied to a container element with pDefer directive where content needs to be placed inside an ng-template.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div pDefer&gt;
    &lt;ng-template&gt;
       deferred content
   &lt;/ng-template&gt;
&lt;/div&gt;
</app-code>

            <h5>Callback</h5>
            <p>onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div pDefer (onLoad)="initData()"&gt;
    &lt;ng-template&gt;
        &lt;p-table [value]="cars"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th&gt;Vin&lt;/th&gt;
                &lt;th&gt;Year&lt;/th&gt;
                &lt;th&gt;Brand&lt;/th&gt;
                &lt;th&gt;Color&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-car&gt;
            &lt;tr&gt;
                &lt;td&gt;&#123;&#123;car.vin&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;car.year&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;car.brand&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;car.color&#125;&#125;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
    &lt;/ng-template&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
this.cars = //initialize
</app-code>

            <h5>Properties</h5>
            <p>Directive has no attributes.</p>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onLoad</td>
                            <td>-</td>
                            <td>Callback to invoke when deferred content is loaded.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Directive does not apply any styling to host.</p>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/defer" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-defer-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div style="height:1200px"&gt;
    Table is not loaded yet, scroll down to initialize it.
&lt;/div&gt;

&lt;p-toast&gt;&lt;/p-toast&gt;

&lt;div pDefer (onLoad)="initData()"&gt;
    &lt;ng-template&gt;
        &lt;p-table [value]="cars"&gt;
            &lt;ng-template pTemplate="header"&gt;
                &lt;tr&gt;
                    &lt;th&gt;Vin&lt;/th&gt;
                    &lt;th&gt;Year&lt;/th&gt;
                    &lt;th&gt;Brand&lt;/th&gt;
                    &lt;th&gt;Color&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/ng-template&gt;
            &lt;ng-template pTemplate="body" let-car&gt;
                &lt;tr&gt;
                    &lt;td&gt;&#123;&#123;car.vin&#125;&#125;&lt;/td&gt;
                    &lt;td&gt;&#123;&#123;car.year&#125;&#125;&lt;/td&gt;
                    &lt;td&gt;&#123;&#123;car.brand&#125;&#125;&lt;/td&gt;
                    &lt;td&gt;&#123;&#123;car.color&#125;&#125;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/ng-template&gt;
        &lt;/p-table&gt;
    &lt;/ng-template&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class DeferDemo &#123;

    cars: Car[];

    constructor(private carService: CarService, private messageService: MessageService)  &#123;&#125;

    initData()  &#123;
        this.messageService.add(&#123;severity:'success', summary:'Data Initialized', detail:'Render Completed'&#125;);
        this.carService.getCarsSmall().then(cars => this.cars = cars);
     &#125;
     
 &#125;
</app-code>

        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-defer-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
     </p-tabView>
</div>
